<template>
  <div style="background-color: #F1F1F1;width: 100%;height: 100%" >


    <div style=" float: left;margin-top: 20px; display: flex;padding: 0px 20px;border-bottom: 1px solid #0270C1;background-color: white;width: 95%;margin-left: 14px">
      <div>
        <svg t="1665456440656" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2595" width="32" height="32"><path d="M818.4 180.2h-43.7v-43.1c0-23.8-19.6-43.1-43.8-43.1-24.2 0-43.8 19.3-43.8 43.1v43.1H337v-43.1c0-15.4-8.4-29.6-21.9-37.3-13.6-7.7-30.3-7.7-43.8 0-13.6 7.7-21.9 21.9-21.9 37.3v43.1h-43.7c-48.3 0.1-87.4 38.6-87.6 86v578.5c0 47.4 39.4 86.2 87.6 86.2h612.8c48.4-0.1 87.5-38.7 87.6-86.2V266.4c-0.2-47.6-39.3-86.1-87.7-86.2zM518.7 315.9c73.8 0.2 133.4 58.6 133.6 130.6-0.2 72-59.8 130.3-133.5 130.5-73.7-0.2-133.4-58.5-133.6-130.5 0.1-72 59.7-130.3 133.5-130.6z m253.7 509.2H251.6v-41.4c0-82.7 173.6-128.3 260.4-128.3 86.8 0 260.4 45.5 260.4 128.3v41.4z" fill="#1296db" p-id="2596"></path></svg>      </div>

      <div style="text-align: center;line-height: 40px;">员工个人信息：</div>

      <div></div>
    </div>

    <el-table :data="tableData0" stripe :header-cell-style="{background:'#f5f7fa'}"  :cell-style="{'text-align':'center'}" style="width: 98%;margin-left: 15px;float: left;" >
      <el-table-column align='center' prop="gonghao" label="工 号"  />
      <el-table-column align='center' prop="name" label="姓 名"  />
      <el-table-column align='center' prop="bumen" label="部 门"  />
      <el-table-column align='center' prop="zhiwu" label="职 务"  />
      <el-table-column align='center' prop="ruzhiriqi" label="入职日期"  />
    </el-table>




    <div STYLE="width: 42%;float: left;margin-top: 20px;margin-left: 15px">
    <div style="  display: flex;padding: 0px 20px;border-bottom: 1px solid #0270C1;background-color: white;">
      <div>
        <svg t="1665215282631" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4115" width="32" height="32"><path d="M724.5824 246.3744v65.536h152.3712V897.024H346.3168v65.536h596.1728V246.3744H724.5824z" fill="#2186FF" p-id="4116"></path><path d="M81.5104 61.44v901.12h708.608V61.44h-708.608z m643.072 835.584h-577.536V126.976h577.536v770.048z" p-id="4117"></path><path d="M585.9328 304.3328l-46.2848-46.4896-116.5312 116.5312-116.3264-116.5312-46.4896 46.4896 109.1584 108.9536h-100.5568v65.536h121.4464v85.1968h-121.4464v65.536h121.4464v136.6016h65.536v-136.6016h121.4464v-65.536h-121.4464v-85.1968h121.4464v-65.536h-100.5568z" fill="#2186FF" p-id="4118"></path></svg>      </div>

      <div style="text-align: center;line-height: 40px;">基本薪资计算：</div>


    </div>

    <el-table :data="tableData" stripe :header-cell-style="{background:'#f5f7fa'}" :cell-style="{'text-align':'center'}" >
      <el-table-column align='center' prop="jibenBumen" label="部门" />
      <el-table-column align='center' prop="jibenRiqi" label="日期"  />
      <el-table-column align='center' prop="jibenXinzi" label="基本薪资"  >
          <template #default="s">
            <span v-if="s.row.ff==false">* * * *</span>
            <span v-if="s.row.ff==true">{{s.row.jibenXinzi}}</span>
          </template>
      </el-table-column>

      <el-table-column align='center' prop="jibenGangweijintie" label="岗位津贴"  >
        <template #default="s">
          <span v-if="s.row.ff==false">* * * *</span>
          <span v-if="s.row.ff==true">{{s.row.jibenGangweijintie}}</span>
        </template>
      </el-table-column>
      <el-table-column align='center' prop="" label="请注意保密"  >
        <template #default ='ss'>
          <el-button @mouseover="chakan(ss.row)"  @mouseout="chakan2(ss.row)">查 看</el-button>
        </template>

      </el-table-column>

    </el-table>
    </div>


    <div STYLE="width: 54.8%;float: left;margin-top: 20px;margin-left: 15px">
      <div style="  display: flex;padding: 0px 20px;border-bottom: 1px solid #0270C1;background-color: white;">
        <div>
          <svg t="1665215958495" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2537" width="32" height="32"><path d="M512 258c-53.02 0-96-42.98-96-96s42.98-96 96-96 96 42.98 96 96-42.98 96-96 96z m0 350c-53.02 0-96-42.98-96-96s42.98-96 96-96 96 42.98 96 96-42.98 96-96 96z m0 350c-53.02 0-96-42.98-96-96s42.98-96 96-96 96 42.98 96 96-42.98 96-96 96z" fill="#2F54EB" p-id="2538"></path></svg>      </div>

        <div style="text-align: center;line-height: 40px;">其他金额计算：</div>


      </div>

      <el-table :data="tableData2" stripe  :header-cell-style="{background:'#f5f7fa'}"  :cell-style="{'text-align':'center'}" style="width:100%;float: left;" >
        <el-table-column align='center' prop="jibenGonghao" label="工 号"  />
        <el-table-column align='center' prop="jibenName" label="姓 名"  />

        <el-table-column align='center' prop="jibenShijianjianshu" label="事件简述"  >
          <template #default="s">
            <span v-if="s.row.ff==false">* * * *</span>
            <span v-if="s.row.ff==true">{{s.row.jibenShijianjianshu}}</span>
          </template>

        </el-table-column>


        <el-table-column align='center' prop="jibenJine" label="金 额"  >
          <template #default="s">
          <span v-if="s.row.ff==false">* * * *</span>
          <span v-if="s.row.ff==true">{{s.row.jibenJine}}</span>
        </template>
        </el-table-column>

        <el-table-column align='center' prop="" label="请注意保密"  >
          <template #default ='ss'>
            <el-button @mouseover="c2hakan(ss.row)"  @mouseout="c2hakan2(ss.row)">查 看</el-button>
          </template>

        </el-table-column>


      </el-table>

    </div>

    <div style=" float: left;margin-top: 20px; display: flex;padding: 0px 20px;border-bottom: 1px solid #0270C1;background-color: white;width: 95%;margin-left: 14px">

      <div>
        <svg t="1665215728200" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6098" width="32" height="32"><path d="M351.05493 149.063C156.88293 151.137 0.46493 308.942 0.09793 503.122A355.78 355.78 0 0 0 348.98393 867.18c195.903-2.086 353.18-162.293 351.649-358.194 2.683-195.857-153.727-356.9-349.578-359.923z m88.257 367.503h77.915v58.953H405.17993v34.479h112.046v58.953H405.17993v73.086H298.30893v-74.121H183.50393v-58.955h114.805v-34.477H183.50393v-57.918h81.707l-92.738-172.374h118.25l60.332 134.453 59.297-134.453h120.32l-91.36 172.374z m0 0" fill="#1D92FF" p-id="6099"></path><path d="M980.22593 772.719H669.94893a411.612 411.612 0 0 1-250.633 148.93h566.77a34.454 34.454 0 0 0 26.789-10.254 34.465 34.465 0 0 0 9.754-26.977v-68.953c0-30.678-12.754-44.125-42.402-44.125v1.379z m3.102-446.453H724.07393a431.582 431.582 0 0 1 38.27 148.93h223.398a34.478 34.478 0 0 0 28.711-10.067 34.467 34.467 0 0 0 9.555-28.886V367.29a34.475 34.475 0 0 0-9.371-30.098 34.475 34.475 0 0 0-29.93-9.891l-1.379-1.035z m-305.105-74.469h161.344a34.46 34.46 0 0 0 28.078-10.265 34.462 34.462 0 0 0 9.5-28.344v-71.02a34.455 34.455 0 0 0-9.602-29.441 34.46 34.46 0 0 0-29.355-9.859H471.71893a403.356 403.356 0 0 1 172.375 106.871 445.918 445.918 0 0 1 34.473 42.058h-0.344z m271.664 411.289v-78.949c0-19.039-15.434-34.471-34.473-34.471H760.27293a435.039 435.039 0 0 1-43.438 149.275h198.922c19.039 0 34.473-15.438 34.473-34.477l-0.343-1.378z m0 0" fill="#FF9E12" p-id="6100"></path></svg>      </div>
      <div style="text-align: center;line-height: 40px;">公司补贴计算：</div>
      <div></div>
    </div>
    <el-table :data="tableData3" stripe :header-cell-style="{background:'#f5f7fa'}"   :cell-style="{'text-align':'center'}"  style="width: 98%;margin-left: 15px">
      <el-table-column align='center' prop="jibenRiqi" label="日期" />
      <el-table-column align='center' prop="jibenZhiwu" label="职务 " />

      <el-table-column align='center' prop="jibenButiename" label="补贴名称" >
        <template #default="s">
          <span v-if="s.row.ff==false">* * * *</span>
          <span v-if="s.row.ff==true">{{s.row.jibenButiename}}</span>
        </template>
      </el-table-column>


      <el-table-column align='center' prop="jibenButiejine" label="金额"  >
        <template #default="s">
          <span v-if="s.row.ff==false">* * * *</span>
          <span v-if="s.row.ff==true">{{s.row.jibenButiejine}}</span>
        </template>
      </el-table-column>


      <el-table-column align='center' prop="" label="请注意保密"  >
        <template #default ='ss'>
          <el-button @mouseover="c3hakan(ss.row)"  @mouseout="c3hakan2(ss.row)">查 看</el-button>
        </template>

      </el-table-column>
    </el-table>





  </div>

</template >

<script  lang="ts" setup>


import {onBeforeMount, ref} from "vue";
import {useStore} from "vuex";
import axios from "axios";


//当前登陆者信息
//获取登录者信息
const store =useStore();
console.log(store.state.user)



const tableData0 = [
  {
    gonghao: store.state.user.sysEmployee.empCard,
    name: store.state.user.sysEmployee.empName,
    yearsandmonth: '2022-11',
    bumen:store.state.user.sysEmployee.dept.deptName,
    zhiwu:store.state.user.sysEmployee.dept.posts[0].postName,
    ruzhiriqi:store.state.user.sysEmployee.empInter,
  },

]
let gonghao = ref("");

//页面加载事件
onBeforeMount(()=>{
  chajibenxinzi();
  chaqita();
  chakanbutie();
})



// 查看基本薪资
const tableData =ref([])
const chajibenxinzi=()=>{
  gonghao.value = store.state.user.sysEmployee.empCard;
  axios.post("/logisticsOa/chajibenxinzi/"+gonghao.value).then(res=>{

    tableData.value  =res.data.data;
    tableData.value[0]['ff'] =false
    // console.log(tableData.value[0]['ff'])

  })
}
// 查看其他薪资
const tableData2 =ref([]);
const chaqita=()=>{
  gonghao.value = store.state.user.sysEmployee.empCard;
  axios.post("/logisticsOa/cahqitagerende/"+gonghao.value).then(res=>{

    tableData2.value  =res.data.data;
    for(var i = 0; i < tableData2.value.length; i++){
      tableData2.value[i]['ff'] = false
    }
    // tableData.value[0]['ff'] =false
    // console.log(tableData.value[0]['ff'])
  })
}

//查看公司补贴
const tableData3=ref([]);
const  chakanbutie=()=>{
  gonghao.value = store.state.user.sysEmployee.empCard;
  axios.post("/logisticsOa/selectbutieOnepersonde/"+gonghao.value).then(res=>{

    tableData3.value  =res.data.data;
    for(var i = 0; i < tableData3.value.length; i++){
      tableData3.value[i]['ff'] = false
    }

  })
}

const chakan = (row)=>{
  row.ff=true
}
const chakan2 = (row)=>{
  row.ff=false
}

const c2hakan = (row)=>{
  row.ff=true
}
const c2hakan2 = (row)=>{
  row.ff=false
}
const c3hakan = (row)=>{
  row.ff=true
}
const c3hakan2 = (row)=>{
  row.ff=false
}





// const tableData = [
//   {
//     gonghao: 'R123456',
//     name: 'Tom1',
//     yearsandmonth: '2022-12',
//     bumen:"财务部",
//     zhiwu:"财务主管",
//     jibenxinzi:'6000',
//     ruzhiriqi:"2020-9-11",
//     gnagweijintie:"2000",
//     ff:false,
//   },
//
// ]

// const tableData3 = [
//   {
//
//     yearsandmonth: '2022-12',
//     bumen:"财务部",
//     zhiwu:"财务主管",
//     kaoqintinashu:'21',
//     ruzhiriqi:"2020-9-11",
//     gnagweijintie:"2000",
//     zhoumojiaban:'1',
//     jiejiari:'2',
//     queqin:"0",
//     jiabangongzi:"600",
//     koukuan:"100",
//     chidaoorzaotui:"2",
//     jiaotong:"200",
//     qiwen:"300",
//     zhufang:"1000",
//     chanyin:"400",
//     tonghua:"600",
//     ff:false
//   },
//
//
//
// ]
// const tableData2 = [
//   {
//     gonghao: 'R123456',
//     name: '彭于晏',
//     yearsandmonth: '2022-12',
//     bumen:"财务部",
//     zhiwu:"财务主管",
//     kaoqintinashu:'21',
//     gnagweijintie:"2000",
//     shijianjianshu:"调戏女同事",
//     jine:"-200"
//   },
//
//
// ]





</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 98%;
  margin-left: 15px;
  height: 100px;
}

</style>